<template>
  <div class="popUpBox">
      <div class="maskAlert">
            <div class="wapText">
                <slot></slot>
            </div>
            <div class="alertLine"></div>
            <div class="alertSure wapSure" @click="onSureClick">确定</div>
      </div>
  </div>
</template>

<script>
  export default {
    name: 'popUp',
    data() {
      return {
        
      }
    },
    methods:{
        onSureClick(){
            this.$emit('sureClick');
        }
    },
    mounted() {
      
    }
  }
</script>


<style lang="scss">
    .popUpBox{
        position: fixed;
        width:100%;
        height: 100%;
        z-index: 999;
        background: rgba(0,0,0,0.8);
        left: 0;
        top: 0;
        .maskAlert{
            position: fixed;
            width: 65%;
            left: 17.5%;
            top: 30%;
            background: #fff;
            z-index: 999;
            border-radius: 10px;
            .wapText {
                width: 88%;
                font-size: 30px;
                padding: 10% 6% 10% 6%;
                line-height: 70px;
                text-align: center;
            }
            .alertLine {
                width: 100%;
                background: #dadada;
                height: 2px;
                position: absolute;
                left: 0;
                bottom: 80px;
            }
            .wapSure {
                width: 100%;
                color: #000;
                font-size: 33px;
                line-height: 80px;
                height: 80px;
                text-align: center;
            }

        }
    }
</style>